<script setup lang="ts">
import { inject, nextTick, onMounted, reactive, ref, watch } from 'vue';

import {
  ElAlert,
  ElCol,
  ElCollapse,
  ElCollapseItem,
  ElInput,
  ElInputNumber,
  ElOption,
  ElRadio,
  ElRadioGroup,
  ElRow,
  ElSelect,
  ElSlider,
  ElTable,
  ElTableColumn,
} from 'element-plus';

import { vectorServiceApi } from '#/api';
import { lineCapList, lineJoinList, lineTypeList } from '#/assets/style';
import { HierarchicalRender } from '#/assets/visualization-template';
import { usePublicStore, useSceneStore } from '#/store';
import { getLineTypeUrl, getRampUrl } from '#/utils';

interface ColorRampItem {
  id: number;
  label: string;
  value: string;
}
interface LegendItem {
  range: string;
  color: string;
}
const sceneStore = useSceneStore();
const publicStore = usePublicStore();
const currentLayer = inject('currentSelectedLayer') as any;
const activeNames = ref(['renderParams']);
const lineType = ref();
const lineCap = ref();
const lineJoin = ref();
const singleColor = ref('#ff0000');
const opacity = ref(100);
const size = ref(currentLayer.value.type === 'line' ? 5 : 8);
const blur = ref(0);
const isCircleOpenOutline = ref('closed');
const hierarchicalRender = new HierarchicalRender(); // 调用唯一值渲染方法
const hierarchicalMethod = ref('hierarchical_color'); // 当前使用的分级方法
const fieldUniqueValues = ref<Array<any>>([]); // 储存唯一值数组
const field = ref(''); // 当前选择的字段
const fieldList = ref<Array<any>>([]); // 当前图层的字段列表
// const fieldUniqueValues = ref<Array<any>>()
const currentLegendList = ref<Array<LegendItem>>([]); // 储存当前颜色数组和分级范围，以及两者的对应关系，方便后续渲染
const colorRamp = ref('gradual_ramp_red');
const radiusRange = ref<Array<number>>([2, 6]); // 储存半径范围
const level = ref(1); // 分级数
const emptyText = ref('获取中...');
const currentSource = ref();
const hierarchicalRenderParams = reactive({
  layer: currentLayer.value.id,
  type: currentLayer.value.type,
  renderField: field,
  uniqueValues: fieldUniqueValues,
  colorRamp,
  level,
  hierarchicalMethod,
  radiusRange,
  point: {
    outline: isCircleOpenOutline,
    layout: {
      visibility: 'visible',
    },
    paint: {
      'circle-blur': blur,
      'circle-color': singleColor,
      'circle-radius': size,
      'circle-opacity': opacity,
      'circle-stroke-color': '#ffff00',
      'circle-stroke-width': 5,
      'circle-stroke-opacity': 100,
    },
  },
  line: {
    layout: {
      'line-cap': 'butt',
      'line-join': 'miter',
      visibility: 'visible',
    },
    paint: {
      'line-blur': blur,
      'line-color': singleColor,
      'line-opacity': opacity,
      'line-width': size,
      // 'line-dasharray': [6.5, 2.3],
      'line-dasharray': [3, 3],
      // 'line-gap-width': 10
      'line-gap-width': 5,
    },
  },
  polygon: {
    layout: {
      visibility: 'visible',
    },
    paint: {
      'fill-color': singleColor,
      'fill-opacity': opacity,
      'fill-outline-color': '#000000',
    },
  },
  currentLegendList,
} as any);
const circleBlur = ref(
  `blur(${hierarchicalRenderParams.point.paint['circle-blur']}px)`,
);

const currentLineType = ref('solid');
// watch(blur, (val: any) => {
//   console.log(val)
// })

const colorRampSelect = ref(); // 用于获取下拉框dom
const colorRampList = ref<Array<ColorRampItem>>([
  {
    id: 1,
    label: '渐变-红',
    value: 'gradual_ramp_red',
  },
  {
    id: 2,
    label: '渐变-绿',
    value: 'gradual_ramp_green',
  },
  {
    id: 3,
    label: '渐变-紫',
    value: 'gradual_ramp_purple',
  },
  {
    id: 4,
    label: '渐变-蓝',
    value: 'gradual_ramp_blue',
  },
  {
    id: 5,
    label: '渐变-橙',
    value: 'gradual_ramp_orange',
  },
  {
    id: 6,
    label: '渐变-品红',
    value: 'gradual_ramp_magenta',
  },
]);
const drawCircle = (
  canvas: HTMLCanvasElement,
  color: string,
  radius: number,
) => {
  // console.log(singleValueRenderParams)
  // let canvas = document.getElementById('graphPreview') as any
  const ctx = canvas.getContext('2d') as any;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // const radius = size.value
  // const color = singleColor.value
  const circleOpacity = opacity.value;
  // console.log(radius, color)

  // const { outline, outlineColor, outlineOpacity, outlineWidth } = singleValueRenderParams.value.style.point
  const {
    'circle-stroke-color': outlineColor,
    'circle-stroke-opacity': outlineOpacity,
    'circle-stroke-width': outlineWidth,
  } = hierarchicalRenderParams.point.paint;
  const centerX = canvas.width / 2;
  const centerY = canvas.height / 2;
  // 判断轮廓线是否开启
  if (isCircleOpenOutline.value === 'open') {
    ctx.globalAlpha = outlineOpacity / 100;
    ctx.beginPath();
    // console.log(radius + outlineWidth / 2)
    ctx.arc(centerX, centerY, radius + outlineWidth / 2, 0, 2 * Math.PI);
    ctx.lineWidth = outlineWidth; // 轮廓线宽度
    ctx.strokeStyle = outlineColor; // 轮廓线颜色
    ctx.stroke();
    ctx.closePath();
  }
  ctx.globalAlpha = circleOpacity / 100;
  ctx.beginPath();
  ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
  ctx.fillStyle = color;
  ctx.fill();
  ctx.closePath();
};
const drawLine = (canvas: HTMLCanvasElement, color: string, width: number) => {
  // console.log(singleValueRenderParams)
  // let canvas = document.getElementById('graphPreview') as any
  const ctx = canvas.getContext('2d') as any;
  // const width = size.value
  // const color = singleColor.value
  const lineOpacity = opacity.value;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // console.log(ctx)
  ctx.setLineDash([]);
  ctx.lineCap = hierarchicalRenderParams.line.layout['line-cap'];
  ctx.lineJoin = hierarchicalRenderParams.line.layout['line-join'];
  ctx.strokeStyle = color;
  ctx.lineWidth = width;
  ctx.globalAlpha = lineOpacity / 100;
  // console.log(currentLineType.value)
  if (
    currentLineType.value === 'dashed' ||
    currentLineType.value === 'double_dashed'
  ) {
    ctx.setLineDash([
      hierarchicalRenderParams.line.paint['line-dasharray'][0],
      hierarchicalRenderParams.line.paint['line-dasharray'][1],
    ]);
    // ctx.setLineDash([6.5, 2.3])

    // console.log('设置了lineDash')
  }
  // console.log(ctx.lineDash)
  ctx.beginPath();
  // ctx.moveTo(50, 50);
  // ctx.lineTo(350, 50);
  ctx.moveTo(5, 7);
  ctx.lineTo(56, 7);
  ctx.stroke();
  if (
    currentLineType.value === 'double_solid' ||
    currentLineType.value === 'double_dashed'
  ) {
    if (currentLineType.value === 'double_dashed') {
      ctx.setLineDash([
        hierarchicalRenderParams.line.paint['line-dasharray'][0],
        hierarchicalRenderParams.line.paint['line-dasharray'][1],
      ]);
      // ctx.setLineDash([6.5, 2.3])
    }
    ctx.globalAlpha = lineOpacity / 100;
    ctx.beginPath();
    // ctx.moveTo(50, 50 + hierarchicalRenderParams.line.paint['line-gap-width']);
    // ctx.lineTo(350, 50 + hierarchicalRenderParams.line.paint['line-gap-width']);
    ctx.moveTo(
      5,
      7 + hierarchicalRenderParams.line.paint['line-gap-width'] * 2,
    );
    // ctx.moveTo(5, 7 + 10);
    ctx.lineTo(
      56,
      7 + hierarchicalRenderParams.line.paint['line-gap-width'] * 2,
    );
    // ctx.lineTo(56, 7 + 10);
    ctx.stroke();
  }
};
const drawPolygon = (canvas: HTMLCanvasElement, color: string) => {
  // let canvas = document.getElementById('graphPreview') as any
  const context = canvas.getContext('2d') as any;
  context.clearRect(0, 0, canvas.width, canvas.height);

  const size = Math.min(canvas.width, canvas.height) * 0.8;
  const x = (canvas.width - size) / 2;
  const y = (canvas.height - size) / 2;
  context.globalAlpha = opacity.value / 100;
  // context.fillStyle = singleColor.value;
  context.fillStyle = color;
  context.strokeStyle =
    hierarchicalRenderParams.polygon.paint['fill-outline-color'];
  context.lineWidth = 2;

  context.fillRect(x, y, size, size);
  context.strokeRect(x, y, size, size);
};
const drawLegend = (colorRampChanged?: boolean) => {
  const canvases = document.querySelectorAll('.legend');

  if (hierarchicalMethod.value === 'hierarchical_color') {
    // 如果色带改变，则重新获取颜色数组并赋值
    if (colorRampChanged) {
      const colorList = hierarchicalRender.getColorRampArray(
        colorRamp.value,
        canvases.length,
      );
      for (const [i, canvase] of canvases.entries()) {
        currentLegendList.value[i]!.color = colorList[i] as string;
        if (currentLayer.value.type === 'circle') {
          drawCircle(
            canvase as HTMLCanvasElement,
            colorList[i] as string,
            size.value,
          );
        } else if (currentLayer.value.type === 'line') {
          drawLine(
            canvase as HTMLCanvasElement,
            colorList[i] as string,
            size.value,
          );
        } else {
          drawPolygon(canvase as HTMLCanvasElement, colorList[i] as string);
        }
      }
    }
    // 否则如果色带不改变，改变其他设置，不重新获取颜色数组和重新赋值
    else {
      for (const [i, canvase] of canvases.entries()) {
        const color = currentLegendList.value[i]?.color as string;
        if (currentLayer.value.type === 'circle') {
          drawCircle(canvase as HTMLCanvasElement, color, size.value);
        } else if (currentLayer.value.type === 'line') {
          drawLine(canvase as HTMLCanvasElement, color, size.value);
        } else {
          drawPolygon(canvase as HTMLCanvasElement, color);
        }
      }
    }
  } else {
    const radiusesOrWidths = hierarchicalRender.getCircleRadiusArr(
      radiusRange.value,
      canvases.length,
    );
    for (const [i, canvase] of canvases.entries()) {
      if (currentLayer.value.type === 'circle') {
        drawCircle(
          canvase as HTMLCanvasElement,
          singleColor.value,
          radiusesOrWidths[i],
        );
      } else if (currentLayer.value.type === 'line') {
        drawLine(
          canvase as HTMLCanvasElement,
          singleColor.value,
          radiusesOrWidths[i],
        );
      }
    }
  }
};
const handleColorRampSelectChange = (val: any) => {
  // 如果当前已选择字段，改变色带选择将重新绘制图例
  if (field.value) {
    drawLegend(true);
  }
  let img = null;
  colorRampList.value.forEach((item: any) => {
    if (item.value === val) {
      img = getRampUrl(item.value);
    }
  });

  // console.log(img)
  colorRampSelect.value.$el.children[0].children[0].children[1].setAttribute(
    'style',
    `
        background: url(${img}) no-repeat;
				background-position: 10px center;
				background-size: 80px 20px;
				text-indent: 100px;
				`,
  );
};

const getLineType = () => {
  if (
    hierarchicalRenderParams.line.paint['line-dasharray'].length === 0 &&
    !hierarchicalRenderParams.line.paint['line-gap-width']
  ) {
    currentLineType.value = 'solid';
  } else if (
    hierarchicalRenderParams.line.paint['line-dasharray'].length > 0 &&
    !hierarchicalRenderParams.line.paint['line-gap-width']
  ) {
    currentLineType.value = 'dashed';
  } else if (
    hierarchicalRenderParams.line.paint['line-dasharray'].length === 0 &&
    hierarchicalRenderParams.line.paint['line-gap-width']
  ) {
    currentLineType.value = 'double_solid';
  } else if (
    hierarchicalRenderParams.line.paint['line-dasharray'].length > 0 &&
    hierarchicalRenderParams.line.paint['line-gap-width']
  ) {
    currentLineType.value = 'double_dashed';
  }
};

const renderParamsReturn = () => {
  return new Promise((resolve) => {
    const renderParams =
      currentLayer.value.templateParams ?? currentLayer.value.renderParams;
    delete currentLayer.value.templateParams;
    currentLegendList.value = renderParams.currentLegendList;
    field.value = renderParams.renderField;
    colorRamp.value = renderParams.colorRamp ?? colorRamp.value;
    radiusRange.value = renderParams.radiusRange ?? radiusRange.value;
    level.value = renderParams.level;

    hierarchicalMethod.value = renderParams.hierarchicalMethod;
    // fieldUniqueValues.value = renderParams.uniqueValues

    if (currentLayer.value.type === 'circle') {
      if (renderParams.renderParam.outline === 'open') {
        hierarchicalRenderParams.point.paint['circle-stroke-color'] =
          renderParams.renderParam.paint['circle-stroke-color'];
        hierarchicalRenderParams.point.paint['circle-stroke-width'] =
          renderParams.renderParam.paint['circle-stroke-width'];
        hierarchicalRenderParams.point.paint['circle-stroke-opacity'] =
          renderParams.renderParam.paint['circle-stroke-opacity'];
      }
      isCircleOpenOutline.value = renderParams.renderParam.outline;
      blur.value = renderParams.renderParam.paint['circle-blur'];
      size.value =
        renderParams.renderParam.paint['circle-radius'] ?? size.value;
      opacity.value = renderParams.renderParam.paint['circle-opacity'];
      singleColor.value =
        renderParams.renderParam.paint['circle-color'] ?? singleColor.value;
    } else if (currentLayer.value.type === 'line') {
      hierarchicalRenderParams.line.layout['line-cap'] =
        renderParams.renderParam.layout['line-cap'];
      hierarchicalRenderParams.line.layout['line-join'] =
        renderParams.renderParam.layout['line-join'];
      blur.value = renderParams.renderParam.paint['line-blur'];
      size.value = renderParams.renderParam.paint['line-width'] ?? size.value;
      opacity.value = renderParams.renderParam.paint['line-opacity'];
      singleColor.value =
        renderParams.renderParam.paint['line-color'] ?? singleColor.value;
      hierarchicalRenderParams.line.paint['line-dasharray'] =
        renderParams.renderParam.paint['line-dasharray'];
      hierarchicalRenderParams.line.paint['line-gap-width'] =
        renderParams.renderParam.paint['line-gap-width'];
    } else {
      opacity.value = renderParams.renderParam.paint['fill-opacity'];
      singleColor.value = renderParams.renderParam.paint['fill-color'];
      hierarchicalRenderParams.polygon.paint['fill-outline-color'] =
        renderParams.renderParam.paint['fill-outline-color'];
    }
    resolve(true);
  });
};

const getSource = () => {
  sceneStore.currentSceneConfig.sources.forEach((item: any) => {
    if (item.sourceId === currentLayer.value.source) {
      currentSource.value = item;
    }
  });
};
// 请求当前图层字段值
const requestFields = async () => {
  fieldList.value =
    currentSource.value.sourceType === 'vector'
      ? await vectorServiceApi.getFields(currentLayer.value['source-layer'])
      : await vectorServiceApi.getFieldsFromGeojson(currentLayer.value.source);
  if (fieldList.value.length === 0) emptyText.value = '暂无字段';
};

const handleMethodSelectChange = (val: any) => {
  if (val === 'hierarchical_color') {
    handleColorRampSelectChange(colorRamp.value);
  }
  drawLegend(true);
};

const handleRadiusChange = () => {
  drawLegend();
};
// 获取分段
const getRange = () => {
  const breakPoints = hierarchicalRender.getBreakPointArr(
    fieldUniqueValues.value,
    level.value,
  );
  currentLegendList.value = []; // 清空图例
  let start = fieldUniqueValues.value![0];
  let end;
  for (const breakPoint of breakPoints) {
    end = breakPoint;
    // currentLegendList.value[i].range = `${start}-${end}`
    currentLegendList.value.push({ range: `${start}--${end}`, color: '' });
    start = end;
  }
  end = fieldUniqueValues.value![fieldUniqueValues.value!.length - 1];
  currentLegendList.value.push({ range: `${start}--${end}`, color: '' });
};
const handleLevelChange = () => {
  getRange(); // 先获取改变后的分段
  nextTick(() => {
    drawLegend(true);
  });
};
// 根据选择的字段获取其中的唯一值
const handleFieldSelectChange = async (val: any) => {
  // console.log(currentLayer.value.layerName);
  // level.value = 1

  if (currentSource.value.sourceType === 'vector') {
    fieldUniqueValues.value = await vectorServiceApi.getUniqueValues(
      currentLayer.value['source-layer'],
      val,
      'asc',
    );
    if (fieldUniqueValues.value.length < level.value)
      level.value = fieldUniqueValues.value.length; // 防止不同字段唯一值数量不同，导致下次分级时级数超过字段值数量
    getRange();
    nextTick(() => {
      drawLegend(true);
    });
  } else {
    fieldUniqueValues.value = await vectorServiceApi.getUniqueValuesFromGeojson(
      currentLayer.value.source,
      val,
      'asc',
    );
    if (fieldUniqueValues.value.length < level.value)
      level.value = fieldUniqueValues.value.length;
    getRange();
    nextTick(() => {
      drawLegend(true);
    });
  }
};

const drawEntry = () => {
  drawLegend(false);
};
const changeBlur = () => {
  circleBlur.value = `blur(${hierarchicalRenderParams.point.paint['circle-blur']}px)`;
};

const changeLineType = (val: any) => {
  switch (val) {
    case 'dashed': {
      if (hierarchicalRenderParams.line.paint['line-dasharray'].length === 0) {
        hierarchicalRenderParams.line.paint['line-dasharray'] = [3, 3];
      }
      hierarchicalRenderParams.line.paint['line-gap-width'] = 0;
      break;
    }
    case 'double_dashed': {
      if (hierarchicalRenderParams.line.paint['line-dasharray'].length === 0) {
        hierarchicalRenderParams.line.paint['line-dasharray'] = [3, 3];
      }
      if (!hierarchicalRenderParams.line.paint['line-gap-width']) {
        hierarchicalRenderParams.line.paint['line-gap-width'] = 5;
      }
      break;
    }
    case 'double_solid': {
      hierarchicalRenderParams.line.paint['line-dasharray'] = [];
      if (!hierarchicalRenderParams.line.paint['line-gap-width']) {
        hierarchicalRenderParams.line.paint['line-gap-width'] = 5;
      }
      break;
    }
    case 'solid': {
      hierarchicalRenderParams.line.paint['line-dasharray'] = [];
      hierarchicalRenderParams.line.paint['line-gap-width'] = 0;
      break;
    }
  }
  let img = null;
  lineTypeList.forEach((item: any) => {
    if (item.value === val) {
      img = getLineTypeUrl(item.value);
    }
  });
  lineType.value.$el.children[0].children[0].children[1].setAttribute(
    'style',
    `
        background: url(${img}) no-repeat;
				background-position: 10px center;
				background-size: 300px 20px;
				text-indent: 320px;
				`,
  );
  // console.log(currentLineType.value)
  // drawLine()
  drawLegend(false);
};
const changeLineCap = (val: any) => {
  let img = null;
  lineCapList.forEach((item: any) => {
    if (item.value === val) {
      img = getLineTypeUrl(item.imgName);
    }
  });
  // console.log(img)
  lineCap.value.$el.children[0].children[0].children[1].setAttribute(
    'style',
    `
        background: url(${img}) no-repeat;
				background-position: 10px center;
				background-size: 30px 20px;
				text-indent: 50px;
				`,
  );
  // console.log(currentLineType.value)
  // drawLine()
  drawLegend(false);
};
const changeLineJoin = (val: any) => {
  let img = null;
  lineJoinList.forEach((item: any) => {
    if (item.value === val) {
      img = getLineTypeUrl(item.imgName);
    }
  });
  // console.log(img)
  lineJoin.value.$el.children[0].children[0].children[1].setAttribute(
    'style',
    `
        background: url(${img}) no-repeat;
				background-position: 10px center;
				background-size: 30px 20px;
				text-indent: 50px;
				`,
  );
  // console.log(currentLineType.value)
  // drawLine()
  drawLegend(false);
};
watch(
  hierarchicalRenderParams,
  () => {
    publicStore.setRenderOptions(hierarchicalRenderParams);
  },
  {
    immediate: true,
    deep: true,
  },
);

//
onMounted(async () => {
  const { renderType, templateParams } = currentLayer.value;
  //  当原先渲染方式是该方式时，或现在渲染方式是来自于模板时，需要参数恢复（赋值）
  if (renderType[1] === 'hierarchicalRender' || templateParams) {
    // 异步函数才能获取到dom
    await renderParamsReturn();
    nextTick(() => {
      handleFieldSelectChange(field.value);
    });
    getLineType();
    changeBlur();
  }
  getSource();
  if (hierarchicalMethod.value === 'hierarchical_color') {
    handleColorRampSelectChange(colorRamp.value); // 当前默认的色带
  }
  await requestFields(); // 请求字段
  // 如果是模板，默认第一个字段渲染
  if (templateParams) {
    field.value = fieldList.value[0];
    handleFieldSelectChange(field.value);
  }
  if (currentLayer.value.type === 'line') {
    changeLineType(currentLineType.value);
    // changeLineCap('butt')
    changeLineCap(hierarchicalRenderParams.line.layout['line-cap']);
    // changeLineJoin('miter')
    changeLineJoin(hierarchicalRenderParams.line.layout['line-join']);
  }
});
</script>

<template>
  <div class="all">
    <ElRow class="itemRow">
      <ElCol :span="4">
        <span class="label-style"> 字段： </span>
      </ElCol>
      <ElCol :span="20">
        <ElSelect
          size="small"
          v-model="field"
          placeholder="请选择字段"
          style="width: 100%"
          @change="handleFieldSelectChange"
          :no-data-text="emptyText"
        >
          <ElOption
            v-for="item in fieldList"
            :key="item"
            :label="item"
            :value="item"
          />
        </ElSelect>
      </ElCol>
    </ElRow>
    <ElRow class="itemRow" v-if="currentLayer.type !== 'fill'">
      <ElCol :span="4">
        <span class="label-style"> 分级方式： </span>
      </ElCol>
      <ElCol :span="20">
        <div>
          <ElRadioGroup
            v-model="hierarchicalMethod"
            @change="handleMethodSelectChange"
          >
            <ElRadio label="hierarchical_color" size="small">分级颜色</ElRadio>
            <ElRadio label="hierarchical_radius" size="small">
              {{ currentLayer.type === 'circle' ? '分级半径' : '分级宽度' }}
            </ElRadio>
          </ElRadioGroup>
        </div>
      </ElCol>
    </ElRow>
    <ElAlert
      v-if="
        hierarchicalRenderParams.currentLegendList &&
        hierarchicalRenderParams.currentLegendList.length > 1000
      "
      title="当前字段分级数过多，只展示前1000位"
      :closable="false"
      type="info"
      show-icon
      center
      style="height: 25px"
    />
    <ElRow class="itemRow preview">
      <ElCol :span="4">
        <span class="label-style"> 预览： </span>
      </ElCol>
      <ElCol
        :span="20"
        v-show="hierarchicalRenderParams.currentLegendList?.length"
      >
        <ElTable
          size="small"
          :data="
            hierarchicalRenderParams.currentLegendList
              ? hierarchicalRenderParams.currentLegendList.slice(0, 1000)
              : hierarchicalRenderParams.currentLegendList
          "
          style="width: 100%"
          max-height="170"
        >
          <ElTableColumn label="图例" width="200">
            <template #default="">
              <!-- <div>{{ scope.row.color }}</div> -->
              <!-- <div :style="{ 'background-color': scope.row.color }">{{ scope.$index }}</div> -->
              <div id="canvas-container" class="flex-center">
                <canvas width="60" height="20" class="legend"></canvas>
              </div>
            </template>
          </ElTableColumn>
          <!-- <canvas width="200" height="20" id="mfz"></canvas> -->
          <ElTableColumn prop="range" label="范围" width="200" />
        </ElTable>
        <!-- <canvas id="graphPreview" width="380" height="100"></canvas> -->
      </ElCol>
    </ElRow>
    <ElRow class="itemRow">
      <ElCol :span="24">
        <ElCollapse v-model="activeNames" accordion>
          <ElCollapseItem
            title="渲染参数"
            name="renderParams"
            v-if="hierarchicalMethod === 'hierarchical_color'"
          >
            <ElRow class="itemRow">
              <ElCol :span="4">
                <span class="label-style"> 分级颜色： </span>
              </ElCol>
              <!-- <el-col :span="20">
                <el-input @input="drawEntry" class="colorInput" v-model="singleColor" type="color"></el-input>
              </el-col> -->
              <!-- <el-form-item label="选择色带：" size="default" prop="colorRamp" required>

              </el-form-item> -->
              <ElCol :span="20">
                <ElSelect
                  ref="colorRampSelect"
                  @change="handleColorRampSelectChange"
                  v-model="colorRamp"
                  placeholder="请选择输入色带"
                  style="width: 100%"
                  size="small"
                >
                  <ElOption
                    v-for="item in colorRampList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  >
                    <ElRow type="flex" :gutter="20" justify="center">
                      <ElCol :span="18">
                        <img
                          :src="getRampUrl(item.value)"
                          style="float: left; height: 30px"
                        />
                      </ElCol>
                      <ElCol :span="6">
                        <span>{{ item.label }}</span>
                      </ElCol>
                    </ElRow>
                  </ElOption>
                </ElSelect>
              </ElCol>
            </ElRow>
            <ElRow class="itemRow">
              <ElCol :span="6">
                <span class="label-style"> 不透明度： </span>
              </ElCol>
              <ElCol :span="18">
                <ElSlider
                  @input="drawEntry"
                  v-model.number="opacity"
                  show-input
                  size="small"
                />
              </ElCol>
            </ElRow>
            <ElRow v-if="currentLayer.type !== 'fill'" class="itemRow">
              <ElCol :span="4">
                <span class="label-style">
                  {{ currentLayer.type === 'circle' ? '大小：' : '宽度：' }}
                </span>
              </ElCol>
              <ElCol :span="20">
                <ElInput
                  @input="drawEntry"
                  v-model.number="size"
                  placeholder="Please input"
                  size="small"
                >
                  <template #append>像素</template>
                </ElInput>
              </ElCol>
            </ElRow>
            <ElRow class="itemRow">
              <ElCol :span="4">
                <span class="label-style"> 分级数： </span>
              </ElCol>
              <ElCol :span="20">
                <ElInputNumber
                  v-model="level"
                  :min="1"
                  :max="fieldUniqueValues?.length || level"
                  style="margin-top: 2px"
                  @change="handleLevelChange"
                  size="small"
                />
              </ElCol>
            </ElRow>
          </ElCollapseItem>
          <ElCollapseItem
            title="渲染参数"
            name="renderParams"
            v-if="hierarchicalMethod === 'hierarchical_radius'"
          >
            <ElRow class="itemRow">
              <ElCol :span="4">
                <span class="label-style"> 颜色： </span>
              </ElCol>
              <ElCol :span="20">
                <ElInput
                  @input="drawEntry"
                  class="colorInput"
                  v-model="singleColor"
                  type="color"
                  size="small"
                />
              </ElCol>
            </ElRow>
            <ElRow class="itemRow">
              <ElCol :span="6">
                <span class="label-style"> 不透明度： </span>
              </ElCol>
              <ElCol :span="18">
                <ElSlider
                  @input="drawEntry"
                  v-model.number="opacity"
                  show-input
                  size="small"
                />
              </ElCol>
            </ElRow>
            <ElRow class="itemRow">
              <ElCol :span="4">
                <span class="label-style">
                  {{ currentLayer.type === 'circle' ? '分级半径' : '分级宽度' }}
                </span>
              </ElCol>
              <ElCol :span="2.5">
                <span class="label-style">Min：</span>
              </ElCol>
              <ElCol :span="5">
                <ElInput
                  v-model.number="radiusRange![0]"
                  placeholder="Please input"
                  style="margin-top: 2px"
                  @change="handleRadiusChange"
                  size="small"
                >
                  <template #append>px</template>
                </ElInput>
              </ElCol>
              <ElCol :span="2.5" :offset="3">
                <span class="label-style">Max：</span>
              </ElCol>
              <ElCol :span="5">
                <ElInput
                  v-model.number="radiusRange![1]"
                  placeholder="Please input"
                  style="margin-top: 2px"
                  @change="handleRadiusChange"
                  size="small"
                >
                  <template #append>px</template>
                </ElInput>
              </ElCol>
            </ElRow>
            <ElRow class="itemRow">
              <ElCol :span="4">
                <span class="label-style"> 分级数： </span>
              </ElCol>
              <ElCol :span="20">
                <ElInputNumber
                  v-model="level"
                  :min="1"
                  :max="fieldUniqueValues?.length || level"
                  style="margin-top: 2px"
                  @change="handleLevelChange"
                  size="small"
                />
              </ElCol>
            </ElRow>
          </ElCollapseItem>

          <ElCollapseItem title="其他样式" name="otherStyle">
            <template v-if="currentLayer.type === 'circle'">
              <ElRow class="itemRow">
                <ElCol :span="4">
                  <span class="label-style"> 模糊度： </span>
                </ElCol>
                <ElCol :span="20">
                  <ElSlider
                    @input="changeBlur"
                    v-model.number="blur"
                    show-input
                    :max="30"
                    size="small"
                  />
                </ElCol>
              </ElRow>
              <ElRow class="itemRow">
                <ElCol :span="8">
                  <span class="label-style"> 是否开启外轮廓线： </span>
                </ElCol>
                <ElCol :span="16">
                  <div>
                    <ElRadioGroup
                      v-model="isCircleOpenOutline"
                      @change="drawEntry"
                    >
                      <ElRadio label="open" size="small">开启</ElRadio>
                      <ElRadio label="closed" size="small">关闭</ElRadio>
                    </ElRadioGroup>
                  </div>
                </ElCol>
              </ElRow>
              <ElRow class="itemRow">
                <ElCol :span="6">
                  <span class="label-style"> 外轮廓线颜色： </span>
                </ElCol>
                <ElCol :span="18">
                  <ElInput
                    @input="drawEntry"
                    class="colorInput"
                    v-model="
                      hierarchicalRenderParams.point.paint[
                        'circle-stroke-color'
                      ]
                    "
                    type="color"
                    :disabled="isCircleOpenOutline === 'closed'"
                    size="small"
                  />
                </ElCol>
              </ElRow>
              <ElRow class="itemRow">
                <ElCol :span="6">
                  <span class="label-style"> 外轮廓线线宽： </span>
                </ElCol>
                <ElCol :span="18">
                  <ElInput
                    @input="drawEntry"
                    v-model.number="
                      hierarchicalRenderParams.point.paint[
                        'circle-stroke-width'
                      ]
                    "
                    placeholder="Please input"
                    :disabled="isCircleOpenOutline === 'closed'"
                    size="small"
                  >
                    <template #append>像素</template>
                  </ElInput>
                </ElCol>
              </ElRow>
              <ElRow class="itemRow">
                <ElCol :span="8">
                  <span class="label-style"> 外轮廓线不透明度： </span>
                </ElCol>
                <ElCol :span="16">
                  <ElSlider
                    @input="drawEntry"
                    v-model.number="
                      hierarchicalRenderParams.point.paint[
                        'circle-stroke-opacity'
                      ]
                    "
                    :disabled="isCircleOpenOutline === 'closed'"
                    show-input
                    size="small"
                  />
                </ElCol>
              </ElRow>
            </template>
            <template v-else-if="currentLayer.type === 'line'">
              <ElRow class="itemRow">
                <ElCol :span="4">
                  <span class="label-style"> 模糊度： </span>
                </ElCol>
                <ElCol :span="20">
                  <ElSlider
                    size="small"
                    @input="changeBlur"
                    v-model.number="blur"
                    show-input
                    :max="30"
                  />
                </ElCol>
              </ElRow>
              <ElRow class="itemRow">
                <ElCol :span="4">
                  <span class="label-style"> 描边样式： </span>
                </ElCol>
                <ElCol :span="20">
                  <ElSelect
                    ref="lineType"
                    style="width: 100%"
                    size="small"
                    v-model="currentLineType"
                    placeholder="请选择线型"
                    @change="changeLineType"
                  >
                    <ElOption
                      v-for="item in lineTypeList"
                      :key="item.id"
                      :label="item.label"
                      :value="item.value"
                    >
                      <ElRow type="flex" :gutter="20" justify="center">
                        <ElCol :span="18">
                          <img
                            :src="getLineTypeUrl(item.value)"
                            style="float: left; height: 30px"
                          />
                        </ElCol>
                        <ElCol :span="6">
                          <span>{{ item.label }}</span>
                        </ElCol>
                      </ElRow>
                    </ElOption>
                  </ElSelect>
                </ElCol>
              </ElRow>
              <ElRow
                class="itemRow"
                v-if="['double_dashed', 'dashed'].includes(currentLineType)"
              >
                <ElCol :span="4" style="display: flex; align-items: center">
                  <span class="label-style"> 虚线长度： </span>
                </ElCol>
                <ElCol :span="3">
                  <span class="label-style"> 实部： </span>
                </ElCol>
                <ElCol :span="6" class="define-input-number">
                  <ElInputNumber
                    v-model="
                      hierarchicalRenderParams.line.paint['line-dasharray'][0]
                    "
                    :min="1"
                    :step="1"
                    controls-position="right"
                    @change="drawEntry"
                    size="small"
                  />
                  <div class="define-append">px</div>
                </ElCol>
                <ElCol :span="3" :offset="2">
                  <span class="label-style"> 虚部： </span>
                </ElCol>
                <ElCol :span="6" class="define-input-number">
                  <ElInputNumber
                    v-model="
                      hierarchicalRenderParams.line.paint['line-dasharray'][1]
                    "
                    :min="1"
                    :step="1"
                    controls-position="right"
                    @change="drawEntry"
                    size="small"
                  />
                  <div class="define-append">px</div>
                </ElCol>
              </ElRow>
              <ElRow
                v-if="
                  ['double_solid', 'double_dashed'].includes(currentLineType)
                "
                class="itemRow"
              >
                <ElCol :span="4">
                  <span class="label-style"> 线隙宽度： </span>
                </ElCol>
                <ElCol :span="20">
                  <ElInput
                    @input="drawEntry"
                    v-model.number="
                      hierarchicalRenderParams.line.paint['line-gap-width']
                    "
                    placeholder="Please input"
                    size="small"
                  >
                    <template #append>像素</template>
                  </ElInput>
                </ElCol>
              </ElRow>
              <ElRow class="itemRow">
                <ElCol :span="4">
                  <span class="label-style"> 端点样式： </span>
                </ElCol>
                <ElCol :span="20">
                  <ElSelect
                    ref="lineCap"
                    style="width: 100%"
                    size="small"
                    v-model="hierarchicalRenderParams.line.layout['line-cap']"
                    placeholder="请选择端点样式"
                    @change="changeLineCap"
                  >
                    <ElOption
                      v-for="item in lineCapList"
                      :key="item.id"
                      :label="item.label"
                      :value="item.value"
                    >
                      <ElRow type="flex" :gutter="20" justify="center">
                        <ElCol :span="4">
                          <img
                            :src="getLineTypeUrl(item.imgName)"
                            style="float: left; height: 30px"
                          />
                        </ElCol>
                        <ElCol :span="20">
                          <span>{{ item.label }}</span>
                        </ElCol>
                      </ElRow>
                    </ElOption>
                  </ElSelect>
                </ElCol>
              </ElRow>
              <ElRow class="itemRow">
                <ElCol :span="4">
                  <span class="label-style"> 连接样式： </span>
                </ElCol>
                <ElCol :span="20">
                  <ElSelect
                    ref="lineJoin"
                    style="width: 100%"
                    size="small"
                    v-model="hierarchicalRenderParams.line.layout['line-join']"
                    placeholder="请选择连接样式"
                    @change="changeLineJoin"
                  >
                    <ElOption
                      v-for="item in lineJoinList"
                      :key="item.id"
                      :label="item.label"
                      :value="item.value"
                    >
                      <ElRow type="flex" :gutter="20" justify="center">
                        <ElCol :span="4">
                          <img
                            :src="getLineTypeUrl(item.imgName)"
                            style="float: left; height: 30px"
                          />
                        </ElCol>
                        <ElCol :span="20">
                          <span>{{ item.label }}</span>
                        </ElCol>
                      </ElRow>
                    </ElOption>
                  </ElSelect>
                </ElCol>
              </ElRow>
            </template>
            <template v-else>
              <ElRow class="itemRow">
                <ElCol :span="6">
                  <span class="label-style"> 外轮廓线颜色： </span>
                </ElCol>
                <ElCol :span="18">
                  <ElInput
                    @input="drawEntry"
                    class="colorInput"
                    v-model="
                      hierarchicalRenderParams.polygon.paint[
                        'fill-outline-color'
                      ]
                    "
                    type="color"
                    size="small"
                  />
                </ElCol>
              </ElRow>
            </template>
          </ElCollapseItem>
        </ElCollapse>
      </ElCol>
    </ElRow>
  </div>
</template>

<style lang="scss" scoped>
.all {
  width: 100%;
}

.itemRow {
  width: 100%;
  padding: 5px;
}

.el-input {
  width: 100%;
}

.label-style {
  font-size: 15px;
}

.colorInput {
  caret-color: transparent;
}

:deep(.colorInput .el-input__inner:hover) {
  cursor: pointer;
}

:deep(.el-table .el-table__cell) {
  text-align: center;
}

.preview {
  height: 170px;
}

.legend {
  margin-top: 2px;
}

:deep(.el-table:not(.el-table--border) .el-table__cell) {
  border: none;

  /* 去除表格边框 */
}

:deep(.el-table--small .cell) {
  height: 25px;
  padding-right: 20px;
}

:deep(.el-collapse-item__header) {
  font-size: 15px;
  font-weight: 600;
}

#canvas-container {
  position: relative;
  // text-align: center;
  /* stylelint-disable-next-line value-keyword-case */
  filter: v-bind(circleBlur);

  /* 设置模糊效果 */
}

/* 自定义数字输入框append  */
.define-input-number {
  display: flex;
  width: 100%;
  border: 1px solid #dcdfe6;
  border-radius: 8px;

  .el-input-number--mini {
    flex: 1;
  }

  :deep(.el-input__inner) {
    border: none !important;
  }
}

.define-append {
  display: inline-block;
  width: 40px;
  height: 26px;
  padding: 0 3px;
  font-size: 12px;
  line-height: 26px;
  color: #909399;
  text-align: center;
  background: #f5f7fa;
  border-left: none;
}
</style>
